<template>
    <div class="set">
    	<div class="title">我关心的零工</div class="title">
    	<div class="myjob clearfix">
    		<span class="clearfix"><em>清洁工</em>&nbsp;<i>&times;</i></span>
    		<span class="clearfix"><em>家政服务</em>&nbsp;<i>&times;</i></span>
    		<span class="clearfix"><em>家政服务</em>&nbsp;<i>&times;</i></span>
    		<span class="clearfix"><em>清洁工</em>&nbsp;<i>&times;</i></span>
    	</div>
    	<div class="title">其他零工类型 <span>点击添加到我关系的零工中</span></div class="title">
    	<div class="job clearfix">
    		<span :class="{current: flag == index}" @click="flag = index" v-for="(item,index) in data">{{item}}</span>
    	</div>
    	<button class="btn">保存</button>
    	<button class="btn btn2">取消</button>
    </div>
</template>

<script>
export default {
    name: 'set',
    data(){
    	return{
    		flag:-1,
    		data:["家政装修","心理咨询","校园兼职","活动主持","代办跑腿","教育培训","搬家速运"]
    	}
    }
}
</script>

<style scoped>
.set{
	padding: 16px;
}
.title{
	font-size: 14px;
}
.title span{
	font-size: 12px;
	color: #999;
}
.myjob,.job{
	padding: 20px 0 40px;
}
.myjob span{
	color: #fff;
	font-size: 12px;
	background-color: orange;
	padding: 0 8px;
	border-radius: 5em;
	display: inline-block;
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}
.myjob span em{
	height: 30px;
	line-height: 30px;
	display: inline-block;
	float: left;
}
.myjob span i{
	height: 30px;
	line-height: 30px;
	font-style: normal;
	font-size: 18px;
	display: inline-block;
	float: right;
}
.job span{
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	border:1px solid #ccc;
	border-radius: 5em;
	padding: 0 8px;
	display: inline-block;
	float: left;
	margin-right: 14px;
	margin-bottom: 10px;
}
.job span.current{
	background-color: orange;
	color: #fff;
	border-color: orange;
}
.btn{
	width: 80%;
	height: 42px;
	font-size: 16px;
	color: #fff;
	background-color: orange;
	border-radius: 5em;
	margin: 0 auto;
	display: block;
	margin-bottom: 20px;
}
.btn2{
	border:1px solid orange;
	background-color: #fff;
	color: orange;
}
</style>
